<template>
  <view class="ver-layout">
    <view class="date-view" @click="showPopup">< {{ selDate }} ></view>
    <uni-popup ref="popup" type="bottom">
      <view class="picker-layout">
        <view class="picker-title hor-layout-side-center">
          <u-button size="mini" type="default" @click="closePopup">取消</u-button>
          <view class="picker-title-text">选择时间</view>
          <u-button size="mini" type="primary" plain @click="confirmSelect">确定</u-button>
        </view>
        <picker-view :indicator-style="indicatorStyle" :value="selValue" @change="bindChange"
                     class="picker-view">
          <picker-view-column>
            <view class="item" v-for="(item,index) in years" :key="index">{{ item }}年</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item,index) in months" :key="index">{{ item }}月</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item,index) in days" :key="index">{{ item }}日</view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import dayjs from 'dayjs';

export default {
  name: "date-select",
  props: {
    value: {
      type: String,
      default: dayjs().format('YYYY-MM-DD')
    },
  },
  data() {
    console.log("data============")
    let [y, m, d] = this.value.split('-'),
        years = Array.from({length: dayjs().get('year') - 1990 + 1}, (v, k) => 1990 + k),
        months = Array.from({length: 12}, (v, k) => k + 1),
        days = Array.from({length: dayjs().daysInMonth()}, (v, k) => k + 1),
        y_index = years.findIndex(year => year === Number(y)),
        m_index = months.findIndex(month => month === Number(m)),
        d_index = days.findIndex(day => day === Number(d)),
        selValue = [y_index, m_index, d_index],
        pickerValue = [y_index, m_index, d_index],
        selDate = this.value
    return {
      indicatorStyle: '',
      pickerValue,
      years,
      months,
      days,
      selValue,
      selDate
    }
  },
  created() {
  },
  methods: {
    bindChange(e) {
      let [y, m, d] = e.detail.value
      this.pickerValue = e.detail.value
      let pickerDate = `${this.years[y]}-${this.months[m]}-${this.days[d]}`
      console.log("bindChange", pickerDate)
      this.days = Array.from({length: dayjs(pickerDate).daysInMonth()}, (v, k) => k + 1)
    },
    showPopup() {
      this.$refs.popup.open('popup')
    },
    closePopup() {
      this.$refs.popup.close('popup')
    },
    confirmSelect() {
      this.selValue = this.pickerValue
      let [y, m, d] = this.selValue
      this.selDate = `${this.years[y]}-${this.months[m]}-${this.days[d]}`
      this.$emit("input", this.selDate);
      this.closePopup()
    }
  }
}
</script>

<style scoped>
.date-view {
  width: 100%;
  height: 33px;
  line-height: 33px;
  text-align: center;
  background: #EFEFEF;
  /*  */
  font-size: 12px;
  color: #666666;
}

.picker-layout {
  width: 100%;
  height: 300px;
  background: white;
}

.picker-title {
  padding: 0px 12px;
  width: 100%;
  height: 40px;
}

.picker-title-text {
  flex: 1;
  text-align: center;
}

.picker-view {
  width: 100%;
  height: 270px;
  margin-top: 10px;
  background: white;
}

.item {
  align-items: center;
  justify-content: center;
  text-align: center;
}
</style>
